<template>
<div class="info-box">
  <div class="flow-chart">
    <ShipingFlow/>
  </div>
  <div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="基础信息">
        <BasicInfo/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="任务详情">
        <TaskDetails/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="文件拓扑">
        <FileTopology/>
      </a-tab-pane>
      <a-tab-pane key="4" tab="执行记录">
        <ExecutionRecord/>
      </a-tab-pane>
    </a-tabs>
  </div>
</div>
</template>

<script setup>
import { ref, onBeforeUnmount, onMounted } from 'vue';
import ShipingFlow from './ShipingFlow.vue'
import BasicInfo from './BasicInfo.vue'
import TaskDetails from './TaskDetails.vue'
import FileTopology from './FileTopology.vue'
import ExecutionRecord from './ExecutionRecord.vue'
const activeKey = ref('1')
onBeforeUnmount(() => {
})
onMounted(() => {

})
</script>

<style lang="scss" scoped>
.info-box {
  background: #fff;
  padding: 20px;
  .flow-chart {
    border-bottom: 1px solid #DCDEE0;
    margin-bottom: 30px;
  }
}
</style>
